import React, { Component, createRef } from 'react'

import store from '../store'
import MyBtn from '../../components/MyBtn'
import { countDesc, changeCount, changeCity, changeWord, changeFlag, changeMsg, changeDataTestAsync, changeDataListAsync } from '../actions'

export default class Mycounter extends Component {
  txt = createRef()
  render() {
    const { count, city, word, flag, msg, data: { test, list } } = store.getState()
    const value = this.props.value
    return (
      <div>
        {
          flag ?
            <div>
              <h3>Redux - 计数器</h3>
              <h4>count = {count} - {value.count}</h4>
              <h4>city = {city}</h4>
              <h4>word = {word}</h4>
              <h4>msg = {msg}</h4>
              <h4>test = {test}</h4>
            </div>
            :
            <div>
              <h3>404</h3>
            </div>
        }
        <hr />
        <div>
          <MyBtn text='count add' onClick={() => store.dispatch({ type: 'countAdd' })}></MyBtn>
          <MyBtn text='count desc' onClick={() => store.dispatch(countDesc)}></MyBtn>
          <MyBtn text='change count' onClick={() => store.dispatch(changeCount(50))}></MyBtn>
          <MyBtn text='change city' onClick={() => store.dispatch(changeCity('上海'))}></MyBtn>
          <MyBtn text='change word' onClick={() => store.dispatch(changeWord('要坐的分开一点'))}></MyBtn>
          <MyBtn text='change flag' onClick={() => store.dispatch(changeFlag(!flag))}></MyBtn>
        </div>
        <br />
        <div>
          <input type='text' value={msg} ref={this.txt} onChange={() => store.dispatch(changeMsg(this.txt.current.value))} />
        </div>
        <hr />
        <MyBtn text='get Test' onClick={() => store.dispatch(changeDataTestAsync())}></MyBtn>
        <MyBtn text='get list' onClick={() => store.dispatch(changeDataListAsync())}></MyBtn>

        <ul>
          {
            list.map(item => {
              return (
                <li key={item._id}>{item.name}</li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
